@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

.button-attr-color(@theme, @attr, @attr-prepend: "", @ghost: false) {
  &:active {
    @{attr}: e(@attr-prepend) @@theme-active;
  }

  &.@{prefix}-is-disabled {
    @{attr}: e(@attr-prepend) @@theme-disabled;
  }

  @theme-default: e("btn-color-@{theme}");
  @theme-active: e("btn-color-@{theme}-active");
  @theme-disabled: e("btn-color-@{theme}-disabled");

  @{attr}: e(@attr-prepend) @@theme-default;
}

.@{prefix}-button {
  .button();

  .@{prefix}-button__text,
  .@{prefix}-icon {
    position: relative;
    z-index: 1;
    line-height: @btn-line-height-default;
  }

  .@{prefix}-icon {
    font-size: @btn-icon-size;
  }

  .@{prefix}-loading {
    font-size: @btn-loading-size;
  }

  .@{prefix}-icon+.@{prefix}-button__text {
    margin-left: @spacer;
  }

  .@{prefix}-loading+.@{prefix}-button__text {
    margin-left: @spacer;
  }

  // 主要按钮
  &--base {
    color: @text-anti-primary-color;
    .button-size(@btn-height-default, @btn-font-default, @btn-padding-horizontal-default, 0);
    .button-attr-color("gray-bg", background-color);
    .button-attr-color("text-gray", color);

    &.@{prefix}-button--primary {
      color: @text-anti-primary-color;
      .button-attr-color("primary", background-color);
    }

    &.@{prefix}-button--success {
      color: @text-anti-primary-color;
      .button-attr-color("success", background-color);
    }

    &.@{prefix}-button--warning {
      color: @text-anti-primary-color;
      .button-attr-color("warning", background-color);
    }

    &.@{prefix}-button--danger {
      color: @text-anti-primary-color;
      .button-attr-color("danger", background-color);
    }

    &.@{prefix}-button--ghost {
      background-color: transparent;

      &.@{prefix}-button--primary {
        .button-attr-color("primary", border, "1px solid", true);
      }

      &.@{prefix}-button--success {
        .button-attr-color("success", color, "", true);
        .button-attr-color("success", border, "1px solid", true);
      }

      &.@{prefix}-button--warning {
        .button-attr-color("warning", color, "", true);
        .button-attr-color("warning", border, "1px solid", true);
      }

      &.@{prefix}-button--danger {
        .button-attr-color("danger", color, "", true);
        .button-attr-color("danger", border, "1px solid", true);
      }
    }
  }

  // 次要按钮
  &--outline {
    .button-size(@btn-height-default, @btn-font-default, @btn-padding-horizontal-default, @btn-border-width);
    .button-attr-color("text", color);

    .button-attr-color("text-bg", background-color);
    .button-attr-color("border-gray", border, "1px solid");

    &.@{prefix}-button--primary {
      .button-attr-color("primary", color);
      .button-attr-color("primary", border, "1px solid");
    }

    &.@{prefix}-button--success {
      .button-attr-color("success", color);
      .button-attr-color("success", border, "1px solid");
    }

    &.@{prefix}-button--warning {
      .button-attr-color("warning", color);
      .button-attr-color("warning", border, "1px solid");
    }

    &.@{prefix}-button--danger {
      .button-attr-color("danger", color);
      .button-attr-color("danger", border, "1px solid");
    }

    &.@{prefix}-button--ghost {
      .button-attr-color("none", background-color, "", true);
      .button-attr-color("white-ghost", color, "", true);
      .button-attr-color("white-ghost", border, "1px solid", true);

      &.@{prefix}-button--primary {
        .button-attr-color("primary", color, "", true);
        .button-attr-color("primary", border, "1px solid", true);
      }

      &.@{prefix}-button--success {
        .button-attr-color("success", color, "", true);
        .button-attr-color("success", border, "1px solid", true);
      }

      &.@{prefix}-button--warning {
        .button-attr-color("warning", color, "", true);
        .button-attr-color("warning", border, "1px solid", true);
      }

      &.@{prefix}-button--danger {
        .button-attr-color("danger", color, "", true);
        .button-attr-color("danger", border, "1px solid", true);
      }
    }
  }

  // 文字按钮
  &--text {
    border: 0;
    .button-size(@btn-height-default, @btn-font-default, @btn-padding-horizontal-default, 0);
    .button-attr-color("text-gray", color);
    .button-attr-color("text-bg", background-color);

    &.@{prefix}-button--primary {
      .button-attr-color("primary", color);
    }

    &.@{prefix}-button--success {
      .button-attr-color("success", color);
    }

    &.@{prefix}-button--warning {
      .button-attr-color("warning", color);
    }

    &.@{prefix}-button--danger {
      .button-attr-color("danger", color);
    }

    &.@{prefix}-button--ghost {
      background: transparent;
      .button-attr-color("white-ghost", color, "", true);

      &.@{prefix}-button--primary {
        .button-attr-color("primary", color, "", true);
      }

      &.@{prefix}-button--success {
        .button-attr-color("success", color, "", true);
      }

      &.@{prefix}-button--warning {
        .button-attr-color("warning", color, "", true);
      }

      &.@{prefix}-button--danger {
        .button-attr-color("danger", color, "", true);
      }
    }
  }

  &.@{prefix}-is-disabled {
    cursor: not-allowed;
  }

  &.@{prefix}-size-s {
    line-height: @btn-line-height-s;
    .button-size(@btn-height-s, @btn-font-default , @btn-padding-horizontal-s);
  }

  &.@{prefix}-size-l {
    width: 100%;
    line-height: @btn-line-height-l;
    .button-size(@btn-height-l , @btn-font-default , @btn-padding-horizontal-l);
  }

  &.@{prefix}-size-full-width {
    display: block;
    width: 100%;
    height: @btn-height-block;
    line-height: @btn-line-height-l;
    border-radius: 0;
  }

  &--icon-only:not(&--round) {
    width: @btn-height-default;
    padding: 0;

    &.@{prefix}-size-s {
      width: @btn-height-s;
    }

    &.@{prefix}-size-l {
      width: @btn-height-l;
    }
  }

  &--shape-round {
    border-radius: @btn-shape-border-radius-default;

    &.@{prefix}-size-s {
      border-radius: @btn-shape-border-radius-s;
    }

    &.@{prefix}-size-l {
      border-radius: @btn-shape-border-radius-l;
    }
  }
}
